<template>
  <div class="wrap">
    <!-- <h3>样式居中</h3> -->
    <div class="container">
      <div class="left" style="background: tomato">left</div>
      <div class="center" style="background: gold">center</div>
      <div class="right" style="background: lightgreen">right</div>
      <!-- 浮动布局时候 center 必须要放在最后 -->
      <!-- <div class="center" style="background: gold">center</div> -->
    </div>

    <div class="centerWrap">
      <div class="itemCenter">元素垂直居中</div>
    </div>

    <ul class="list">
      <li>线条 1px</li>
      <li>web前端 河浪</li>
      <li>helang.love@qq.com</li>
    </ul>

    <div class="button">边框 1px</div>
  </div>
</template>

<script setup lang="ts">
  // import { ref, unref, reactive, onMounted } from 'vue'
</script>

<!-- 三栏布局：左右两栏固定，中间内容自适应 -->
<style lang="less" scoped>
  // flex布局
  .container {
    display: flex;
  }
  .left,
  .right {
    width: 200px;
  }
  .center {
    flex: 1;
  }

  // 浮动布局
  // .container {
  //   overflow: hidden;
  // }
  // .left,
  // .right {
  //   width: 200px;
  //   height: 200px;
  // }
  // .left {
  //   float: left;
  // }
  // .right {
  //   float: right;
  // }
  // .center {
  //   margin-left: 200px;
  //   margin-right: 200px;
  //   height: 200px;
  // }

  // 绝对定位布局
  // .container {
  //   position: relative;
  // }
  // .left,
  // .right {
  //   position: absolute;
  //   top: 0;
  //   width: 200px;
  //   height: 200px;
  // }
  // .left {
  //   left: 0;
  // }
  // .right {
  //   right: 0;
  // }
  // .center {
  //   margin-left: 200px;
  //   margin-right: 200px;
  //   height: 200px;
  // }

  // 宫格布局
  // .container {
  //   display: grid;
  //   grid-template-columns: 200px 1fr 200px; /*列的宽度*/
  // }

  /* ================================================================*/

  // 水平垂直居中
  .centerWrap {
    position: relative;
    width: 100%;
    height: 100px;
    background-color: aquamarine;
    border: 1px solid #ccc;
  }

  .itemCenter {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: burlywood;
  }

  // 水平垂直居中 - flex
  // .centerWrap {
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   width: 100%;
  //   height: 100px;
  //   background-color: aquamarine;
  // }
  // .itemCenter {
  //   background-color: burlywood;
  // }

  /* ================================================================*/
  /* 线条 */
  .list {
    margin: 0 20px;
    list-style: none;
    line-height: 42px;
    padding: 0;
  }
  .list > li {
    padding: 0;
    position: relative;
  }
  .list > li:not(:first-child):after {
    /* CSS匹配非第一个直接子元素 */
    content: '';
    display: block;
    height: 0;
    border-top: #999 solid 1px;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform: scaleY(0.5); /* 将 1px 的线条缩小为原来的 50% */
  }

  /* 边框 */
  /* 
            其他作者可能会通过设置4个边的线条凑出边框线的效果，
            这样做不仅代码不够精简，而且调整圆角问题也会非常麻烦
        */
  .button {
    line-height: 42px;
    text-align: center;
    margin: 20px;
    background-color: #f8f8f8;
    position: relative;
    border-radius: 4px;
  }
  .button:after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 1px solid #999;
    transform: scale(0.5);
    transform-origin: 50% 50% 0;
    box-sizing: border-box;
    border-radius: 8px; /* 尺寸缩小 50%，即圆角半径设置为按钮的2倍 */
  }
</style>
